<template>
	<view class="message-container">
		<view v-if="currentIndex == 0">
			<view class="message-item">
				<view class="item-left">
					<image src="../../static/icon/bell.png"></image>
				</view>
				<view class="item-right">
					<view class="right-top">
						<text class="title">装修申请通知</text>
						<text class="time">2020-11-02 12:13</text>
					</view>
					<view class="content">您提交的装修申请工单已审批，请及时查看相关信息，并作出相应评价。</view>
				</view>
			</view>
			<view class="message-item">
				<view class="item-left">
					<image src="../../static/icon/bell.png"></image>
				</view>
				<view class="item-right">
					<view class="right-top">
						<text class="title">故障报修通知</text>
						<text class="time">2020-11-02 12:13</text>
					</view>
					<view class="content">您提交的故障报修工单已被维修人员修复，请及时查看相关工单，并作出相应评价。</view>
				</view>
			</view>
			<view class="message-item">
				<view class="item-left">
					<image src="../../static/icon/bell.png"></image>
				</view>
				<view class="item-right">
					<view class="right-top">
						<text class="title">装修申请通知</text>
						<text class="time">2020-11-02 12:13</text>
					</view>
					<view class="content">您提交的装修申请工单已审批，请及时查看相关信息，并作出相应评价。</view>
				</view>
			</view>
		</view>
		<view v-if="currentIndex == 1">
			<view class="message-item">
				<view class="item-left">
					<image src="../../static/icon/bell.png"></image>
				</view>
				<view class="item-right">
					<view class="right-top">
						<text class="title">待处理工单</text>
						<text class="time">2020-11-02 12:13</text>
					</view>
					<view class="content">您有12项待处理工单，请及时前往工作台处理...</view>
				</view>
			</view>
			<view class="message-item">
				<view class="item-left">
					<image src="../../static/icon/bell.png"></image>
				</view>
				<view class="item-right">
					<view class="right-top">
						<text class="title">组长回复</text>
						<text class="time">2020-11-02 12:13</text>
					</view>
					<view class="content">张天天回复了【故障报修】工单号-TS1022222112545，请及时处理。</view>
				</view>
			</view>
			<view class="message-item">
				<view class="item-left">
					<image src="../../static/icon/bell.png"></image>
				</view>
				<view class="item-right">
					<view class="right-top">
						<text class="title">废弃工单通知</text>
						<text class="time">2020-11-02 12:13</text>
					</view>
					<view class="content">【装修验收】工单号-TS2011141222222，业主临时不在，本工单作废。</view>
				</view>
			</view>
			<view class="message-item">
				<view class="item-left">
					<image src="../../static/icon/bell.png"></image>
				</view>
				<view class="item-right">
					<view class="right-top">
						<text class="title">废弃工单通知</text>
						<text class="time">2020-11-02 12:13</text>
					</view>
					<view class="content">【装修验收】工单号-TS2011141222222，业主临时不在，本工单作废。</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapState(['currentIndex'])
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.message-container {
		background-color: #f5f5f5;
		padding-bottom: 40rpx;

		.message-item {
			width: 710rpx;
			height: 172rpx;
			margin: 20rpx 0 0 20rpx;
			box-shadow: 0px 1rpx 4rpx 0px rgba(204, 204, 204, 0.5);
			background-color: #FFFFFF;
			border-radius: 4rpx;
			display: flex;

			.item-left {
				width: 80rpx;
				height: 80rpx;
				margin: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.item-right {
				flex: 1;
				padding-top: 16rpx;

				.right-top {
					margin-bottom: 14rpx;

					.title {
						color: #333;
						font-size: 32rpx;
						margin-right: 175rpx;
						font-weight: bold;
					}

					.time {
						color: #999;
						font-size: 24rpx;
					}
				}

				.content {
					font-size: 28rpx;
					color: #666;
				}
			}
		}
	}
</style>
